<template>
	<!-- 22年10月26日 -->
	<view :style="{backgroundColor: background, height: isShow ? outheight : height, margin: navMargin,borderRadius: `${borderRadius}rpx`}" >
		<!-- 11.10修改 可加后边距 是否自动切换 -->
		<swiper class="app-swiper" :style="{height: height}" @change="change" :autoplay="autoplay" interval="10000"
			:circular="true" :next-margin="nextMargin">
			<swiper-item :style="{height: height}" class="app-swiper-item dir-top-nowrap"
				v-for="(item, itemIndex) in newData" :key="itemIndex">
				<!-- 12.20 添加判断是否垂直显示 -->
				<view v-for="(rows, rowsIndex) in item" class="app-rows dir-left-nowrap" :key="rowsIndex" 
					:class="isver ? 'app-norows' : ''"  v-if="mode == 'circular'" :style="{margin: String(marginTop)}">
					
					<view v-for="(columns, columnsIndex) in rows" :key="columnsIndex"
						class="app-item dir-top-nowrap cross-center" :class="appItemStyle" :style="{width: width}" >
						<!-- 12.20 给button传item -->
						<app-jump-button :item="columns" @btclick="click(columns)" form :url="columns.url"
							:id="columns.id" :open_type="columns.open_type" arrangement="column">
							<!-- 12.20 添加垂直样式 -->
							<view class="cross-center main-center" :style="{background:itembackground}"
								:class="isver ? 'dir-left-nowrap' : 'dir-left-wrap dir-top-wrap'">
								<image class="app-icon" :style="imgStyle" :lazy-load="true" :src="columns[navimg]">
								</image>
								<!-- :style="{borderRadius:iconRadius}" -->
								<text v-if="istext" :style="{color: color,flex:isver?1:'none',width:textwidth}"
									class="app-text">{{columns.name || columns.title}}</text>
							</view>
							<!-- 11.10 加行内样式 12.20 注释 -->
							<!-- <image class="app-icon" :style="imgStyle" :lazy-load="true" :src="columns[navimg]"></image> -->
							<!-- :style="{borderRadius:iconRadius}" -->
							<!-- <text :style="{color: color}" class="app-text">{{columns.name || columns.title}}</text> -->
						</app-jump-button>
					</view>
				</view>
				<view v-for="(rows, rowsIndex) in item" class="app-rows dir-left-nowrap" :key="rowsIndex"
					v-if="mode == 'square'">
					<view v-for="(columns, columnsIndex) in rows" :key="columnsIndex"
						class="app-item dir-top-nowrap cross-center nav-t" style="margin: 0 14rpx;">
						<app-jump-button :item="columns" @btclick="click(columns)" form :url="columns.url"
							:id="columns.id" :open_type="columns.open_type" arrangement="column">
							<text v-if="istext" class="app-textb">{{columns.name || columns.title}}</text>
							<image class="app-img" :lazy-load="true" :src="columns[navimg]"></image>
						</app-jump-button>
					</view>
				</view>
			</swiper-item>
		
		
		
		</swiper>
		
		<view class="ind-seize" :style="{paddingTop:`${navPaddinngTop}rpx`}" v-if="isShow">
			<view class="indicator">
				<view v-for="(rows, rowsIndex) in newData" :key="rowsIndex"
					:class="rowsIndex == current ? 'rectangle-active': 'rectangle'">
				</view>
			</view>
		</view>
		<view class="arrowtip" v-if="isShow2">
			<image src="/static/image/arrow.png" mode="" class="left"></image>
			<text>要左右滑动哦</text>
			<image src="/static/image/arrow.png" mode="" class="right"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'app-navigation-icon',
		data() {
			return {
				// widthitem: {
				// 	width: uni.upx2px(0) + 'px'
				// },
				width: uni.upx2px(0) + 'px',
				height: 0,
				outheight: 0,
				current: 0,
				
				// showHeight:0,
				// navHeight: 176
			}
		},
		props: {
			// 默认index条的padding
			navPaddinngTop:{
				type:Number,
				default:40
			},
			// 12.20 每个小块的背景色
			itembackground: {
				type: String,
				default () {
					return '#F7F7F7';
				}
			},
			// 是否垂直
			isver: {
				type: Boolean,
				default () {
					return false;
				}
			},
			// 是否显示文字
			istext: {
				type: Boolean,
				default () {
					return true;
				}
			},
			// 圆角
			borderRadius:{
				type:[Number,String],
				default(){
					return 0
				}
			},
			// 文字宽度
			textwidth: {
				type: String
			},
			// 总宽
			allwidth: {
				type: Number,
				default () {
					return 750;
				}
			},
			// 11.10 加是否循环和后边距，行内样式
			autoplay: {
				type: Boolean,
				default () {
					return true;
				}
			},
			nextMargin: {
				type: String,
				default () {
					return '0px';
				}
			},
			imgStyle: {
				type: String
			},
			appItemStyle: {
				type: String
			},
			background: {
				type: String,
				default () {
					return '#ffffff';
				}
			},
			color: {
				type: String,
				default () {
					return '';
				}
			},
			columns: {
				type: Number,
				default () {
					return 3;
				}
			},
			rows: {
				type: Number,
				default () {
					return 4;
				}
			},
			scroll: {
				type: Boolean,
				default () {
					return false;
				}
			},
			navs: {
				type: Array,
				default () {
					return []
				}
			},
			mode: {
				type: String,
				default () {
					return 'circular';
				}
			},
			// 11.10 放出 高度
			navHeight: {
				type: Number,
				default () {
					return 156;
				}
			},
			navMargin: {
				type: String,
				default () {
					return '0'
				}
			},
			/* iconRadius: {
				type: String,
				default () {
					return '0'
				}
			}, */
			isShow: {
				type: Boolean,
				default () {
					return true;
				}
			},
			isShow2:{
				type:Boolean,
				default (){
					return true
				}
			},
			navimg: {
				type: String,
				default () {
					return 'icon_url';
				}
			},
			mch_id: Number,
			store_id: Number,
			// 10.26新增margin
			marginTop:{
				type:String,
				default(){
					return '0' 
				}
			},
			
		},
		computed: {
			// widthitem:function(){
			// 	return {width:uni.upx2px(0) + 'px'}
			// },
			newData: function() {
				this.width = `${uni.upx2px(this.allwidth/this.columns)}px`;
				if (this.nextMargin != '0px') {
					this.width = `${uni.upx2px((this.allwidth-parseInt(this.nextMargin))/this.columns)}px`;
					console.log("++++++++++",this.width);
				}
				let menus = [];
				let newMenus = [];
				let num = Number(this.columns) * this.rows;
				if (this.scroll === true) {
					for (let i = 0; i < Math.ceil(this.navs.length / num); i++) {
						menus.push(this.navs.slice(i * num, (i + 1) * num));
					}
					for (let i = 0; i < menus.length; i++) {
						let arr = [];
						for (let j = 0; j < Math.ceil(menus[i].length / Number(this.columns)); j++) {
							arr.push(menus[i].slice(j * Number(this.columns), (j + 1) * Number(this.columns)));
						}
						newMenus.push(arr);
					}
				} else {
					if (this.rows === -1) {
						menus = [this.navs];
					} else {
						menus.push(this.navs.slice(0, num));
					}
					for (let i = 0; i < menus.length; i++) {
						let arr = [];
						for (let j = 0; j < Math.ceil(menus[i].length / Number(this.columns)); j++) {
							arr.push(menus[i].slice(j * Number(this.columns), (j + 1) * Number(this.columns)));
						}
						newMenus.push(arr);
					}
				}
				if (newMenus.length === 0) return newMenus;
				return newMenus;
			}
		},
		watch: {
			newData: {
				handler: function(newVal) {
					this.height = `${uni.upx2px(newVal[0].length * this.navHeight)}px`;
															
					if( this.isShow2){						
						// 如果显示 底部的字体  就让高度增加一点 默认是显示的 
						this.outheight = `${uni.upx2px(newVal[0].length * this.navHeight + 76)}px`;
					}else{
						// 不显示底部字体就让整体高度减少
						this.outheight = `${uni.upx2px(newVal[0].length * this.navHeight + 35)}px`;
					}
				},
				immediate: true
			},
			
		},
		methods: {
			change(e) {
				this.current = e.target.current
			},
			click(item) {
				
							
				// 12.20 添加跳转条件
				// if (item.url == '/pages/index/index' || item.url.indexOf('/pages/gospeed/index') != -1 || item.url ==
				// 	'/pages/live/index' || item.url == '/pages/user-center/user-center' || item.url ==
				// 	'/pages/store/mine/mine') {
				// 	uni.reLaunch({
				// 		url: item.url
				// 	})
				// 	return;
				// }
				if (item.url == 'javascript:;' || item.url == '/' || item.url == undefined || item.url.indexOf('.mp4') != -
					1 || item.url.indexOf('.png') != -1 || item.url.indexOf('.jpg') != -1) {
					this.$emit('btclick', item)
					return;
				} else if (item.url.indexOf('/plugins/mch/goodslist/goodslist') != -1) {
					// item.url = item.url + '&mch_id=' + this.mch_id + '&store_id=' + this.store_id + '&title=' + item.name
					if (item.url.indexOf('?') == -1) {
						item.url = item.url + '?mch_id=' + this.mch_id + '&store_id=' + this.store_id + '&title=' + item
							.name
					} else {
						item.url = item.url + '&mch_id=' + this.mch_id + '&store_id=' + this.store_id + '&title=' + item
							.name
					}
					uni.navigateTo({
						url: item.url
					})
					// this.$emit('boqlist', item)
					return;
					// 12.20 注释
					/* } else if (item.url.indexOf('/plugins/pt/index/index') != -1 || item.url.indexOf('/pages/goods/list') != -
						1) {
						// if (item.params.kefu_url != undefined) {
						// 	this.$storage.setStorageSync('KEFU', item.params.kefu_url)
						// } else {
						// 	this.$storage.removeStorageSync('KEFU')
						// }
						if (item.url.indexOf('?') == -1) {
							item.url = item.url + '?title=' + item.name
						} else {
							item.url = item.url + '&title=' + item.name
						}

						uni.navigateTo({
							url: item.url
						})
						return; */
				} else {
					uni.navigateTo({
						url: item.url
					})
				}
				/* if(item.url == '/pages/index/index' || item.url == '/pages/gospeed/index' || item.url == '/pages/live/index' || item.url == '/pages/user-center/user-center' || item.url == '/pages/store/mine/mine'){
					uni.reLaunch({
						url:item.url
					})
					return ;
				}
				uni.navigateTo({
					url: item.url
				}) */
			}
		}
	}
</script>

<style scoped lang="scss">
	.appitemstyle {
		border: 1rpx solid #a96536;
		border-radius: 16rpx
	}

	.app-swiper-item {
		width: #{750rpx};
	}

	.app-rows {

		// 11.10 注释
		// width: #{750rpx};
		&+.app-rows {
			margin-top: #{28rpx};
			margin-bottom: #{4rpx};
		}
	}

	.app-norows {
		margin: 0;
	}

	.app-icon {
		/* width: #{90rpx};
		height: #{90rpx}; */
		width: 110rpx;
		height: 110rpx;
		// border-radius: 50%;
		
	}

	.app-text {
		font-size: #{24rpx};
		color: #353535;
		height: #{24rpx};
		line-height: #{24rpx};
		text-align: center;
		margin-top: #{8rpx};
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.app-swiper {
		width: 100%;
	}

	.arrowtip {
		height: 48rpx;
		width: 100%;
		padding-top: 24rpx;
		position: relative;
		font-size: 24rpx;
		text-align: center;
		color: #ff0000;
		display: flex;
		justify-content: center;
		align-items: center;


		image {
			&.left {
				transform: rotate(180deg);
				margin-right: 16rpx;
			}

			&.right {
				margin-left: 16rpx;
			}

			width: 88rpx;
			height: 16rpx;
		}


	}

	.ind-seize {
		height: 32rpx;
		width: 100%;		
		position: relative;
	}

	.indicator {
		width: 102rpx;
		height: 8rpx;
		background-color: #DCDCDC;
		border-radius: 60rpx;
		transition: all 0.5s;
		margin: 0 auto;
		display: flex;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.rectangle {
		width: 102rpx;
	}

	.rectangle-active {
		width: 102rpx;
		background-color: #342B2A;
		border-radius: 60rpx;
	}

	// 一行四个
	.nav-t {
		width: 160rpx;
		height: 86rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		box-shadow: 0px 4rpx 8rpx rgba(0, 0, 0, 0.1);
		// flex-direction: column;
		// justify-content: center;
		position: relative;

		.app-textb {
			font-weight: bold;
			font-size: 24rpx;
			line-height: 42rpx;
			color: #342B2A;
			width: 130rpx;
			margin-top: 6rpx;
		}

		.app-img {
			width: 36rpx;
			height: 36rpx;
			position: absolute;
			bottom: -32rpx;
			right: -4rpx;
		}
	}
</style>
